import React from 'react'
import {
  styled,
  Pagination as MuiPagination,
  Stack,
  Typography,
} from '@mui/material'
import Jumper from './jumper'
import PageSizeSelect from './pageSizeSelect'

const Root = styled('div')(({ theme }) => ({
  width:'100%',
  listStyle: 'none',
  padding: '0px 10px 0px 10px',
  margin: 0,
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  color: theme.palette.text.primary,
  fontSize: theme.typography.pxToRem(14),
  minHeight: 62,
}))

const Label = styled('div')({})
const DefaultGetCountText = count => {
  return <Stack direction="row" spacing={0.5}>
    <Typography>共</Typography>
    <Typography color="primary">{count}</Typography>
    <Typography>条数据</Typography>
  </Stack>
}

const PaginationAction = styled(MuiPagination)(({ theme }) => ({
  '& .MuiPaginationItem-root': {
    margin: '0 4px',
    minWidth: '32px',
    height: '32px',
    //color: theme.palette.primary.main,
    borderRadius: 0,
    border: `1px solid #dedede`,
    '&.Mui-selected': {
      color: '#fff',
      backgroundColor: theme.palette.primary.main,
    },
  },
}))

const PaginationSizeSelect = styled(PageSizeSelect)({
  margin: '0 4px',
})

const PaginationJumper = styled(Jumper)({
  margin: '0 4px',
})

export default function TablePagination(inProps) {
  const {
    count:total,
    page,
    onPageChange,
    rowsPerPage:pageSize,
    onPageSizeChange,
    onRowsPerPageChange,
    rowsPerPageOptions:pageSizeOptions,
    getTotalLabel = DefaultGetCountText,
    jumpable=true,
    ...rest
  } = inProps

  const count = Math.max(Math.ceil(total / pageSize), 1)

  return (
    <Root {...rest}>
      <Label>{getTotalLabel(count)}</Label>
      <Stack direction={'row'} sx={{ alignItems: 'center' }}>
        <PaginationAction
          count={count}
          page={page+1}
          shape="rounded"
          onChange={(e, page) => onPageChange(e, page - 1)}
        />
        {pageSizeOptions && (
          <PaginationSizeSelect
            options={pageSizeOptions}
            value={pageSize}
            onChange={onRowsPerPageChange}
          />
        )}
        {jumpable && <PaginationJumper onChange={(e,page) => onPageChange(e, page - 1)} />}
      </Stack>
    </Root>
  )
}
